<template>
	<view class="container">
		<!-- <view class="hader">
			<view class="title">Prize List</view>
			<view class="address" @tap="toaddress('')">Address</view>
		</view> -->
		<view class="address" @tap="toaddress('')">shipping address</view>
		<v-tabs v-model="current" 
			:tabs="tabs" 
			@change="changeTab" 
			lineHeight="10rpx" 
			lineColor="rgb(255, 87, 51)" 
			fontSize="30rpx"
			bgColor="rgb(246, 246, 246)"
			:zIndex="zindex" 	
			activeColor="rgb(255, 87, 51)" 
			:scroll="false" 
			:lineScale=lineScale 
			padding="30rpx 0 0 0"></v-tabs>
		<view class="main">
			<scroll-view 
				class="scroll-one" 
				lower-threshold="10"
				scroll-y="true"
				@scrolltolower="loadMore"
				v-show="state==0&&prizelist.total>0"
				>
				<view class="list_item" v-for="(item,index) in prizelist.list">
					<view class="item_title">
						<!-- <view class="order">OrderID：{{ item.flow_odd_number }}</view> -->
						<view class="state">wait for sending</view>
					</view>
					<view class="itemcenter" @tap="toaddress(item.id)">
						<image class="img" :src="item.goods_img"></image>
						<view class="itemcenter_text">
							<view class="name">{{ item.goods_name }}</view>
							<view class="text_address">{{ item.ua_detail==null ?"Fill in the delivery address to receive the prize":item.ua_nation+'-'+ item.ua_district+'-'+item.ua_city+'-'+item.ua_detail}}</view>
						</view>
						<image class="img2" src="../../static/images/向左.png"></image>
					</view>
					<!-- <view class="value">
						<view class="value_text">Value：{{item.gold_coin}}Coin</view>
						<view class="buttom" v-show="item.flow_status==0" @tap="openexchangepopup(item)">Exchange</view>
					</view> -->
				</view>
				<view class="Loading" v-show="showLoading">{{ showtext }}</view>
			</scroll-view>	
			<scroll-view 
				class="scroll-one" 
				lower-threshold="10"
				scroll-y="true"
				@scrolltolower="loadMoreone"
				v-show="state==1&&prizelist1.total>0"
				>
				<view class="list_item" v-for="(item,index) in prizelist1.list" :key="index">
					<view class="item_title">
						<view class="order" v-show="item.flow_status==4">Express：{{ item.flow_odd_number }}</view>
						<view class="state" v-show="item.flow_status==1" style="color: rgba(255, 141, 26, 1);">Manual process</view>
						<view class="state" v-show="item.flow_status==2" style="color:rgba(255, 68, 26, 1)">Please pay the freight</view>
						<view class="state" v-show="item.flow_status==3" style="color: rgba(42, 130, 228, 1)">Waiting for delivery of goods</view>
						<view class="state" v-show="item.flow_status==4" style="color: rgba(19, 191, 88, 1)">Wait for delivery</view>
					</view>
					<view class="itemcenter">
						<image class="img" :src="item.goods_img"></image>
						<view class="itemcenter_text">
							<view class="name">{{ item.goods_name }}</view>
							<view class="text_address">{{ item.ua_detail==null ?"Fill in the delivery address to receive the prize":item.ua_nation+'-'+ item.ua_district+'-'+item.ua_city+'-'+item.ua_detail}}</view>
						</view>
						<image class="img2" src="../../static/images/向左.png"></image>
					</view>
					<!-- <view class="value">
						<view class="value_text">Value：{{item.gold_coin}}Coin</view>
						<view class="buttom" v-show="0" @tap="openexchangepopup">Exchange</view>
					</view> -->

					<view class="remarks" v-show="item.flow_status==1">{{ 'The goods are being prepared'}}</view>
					<view v-show="item.flow_status==2" style="display: flex;" @tap="payfreight(item)">
						<view class="ExpressNumber">freight charge：${{ item.freight/100 }}</view>
						<view class="freight">freight payment</view>
					</view>
					<view class="remarks" v-show="item.flow_status==3">{{ 'Wait for the logistics company to pick it up' }}</view>
					<view v-show="item.flow_status==4" style="display: flex;" @tap="copyodercode(item.flow_odd_number,1)">
						<view class="ExpressNumber">waybill:{{ item.flow_odd_number }}</view>
						<view class="copyoderhnum">copy</view>
					</view>
				</view>
				<view class="Loading" v-show="showLoadingone">{{ showtextone }}</view>
			</scroll-view>	
			<scroll-view 
				class="scroll-one" 
				lower-threshold="10"
				scroll-y="true"
				@scrolltolower="loadMoretwo"
				v-show="state==2&&prizelist2.total>0"
				>
				<view class="list_item" v-for="(item,index) in prizelist2.list">
					<view class="item_title">
						<view class="order"><span v-show="item.flow_odd_number!=null">Express：{{ item.flow_odd_number }}</span></view>
						<view class="state" style="color: rgba(128, 128, 128, 1);text-align: center;">Finished</view>
					</view>
					<view class="itemcenter">
						<image class="img" :src="item.goods_img"></image>
						<view class="itemcenter_text">
							<view class="name">{{ item.goods_name }}</view>
							<view class="text_address">{{ item.ua_detail==null ?"Fill in the delivery address to receive the prize":item.ua_nation+'-'+ item.ua_district+'-'+item.ua_city+'-'+item.ua_detail}}</view>
						</view>
						<image class="img2" src="../../static/images/向左.png"></image>
					</view>
					<!-- <view class="value">
						<view class="value_text">Value：{{item.gold_coin}}Coin</view>
						<view class="buttom" v-show="0" @tap="openexchangepopup">Exchange</view>
					</view> -->
					<view v-show="item.flow_odd_number!=null" style="display: flex;" @tap="copyodercode(item.flow_odd_number,2)">
						<view class="ExpressNumber">waybill:{{ item.flow_odd_number }}</view>
						<view class="copyoderhnum">copy</view>
					</view>
					<view class="remarks" v-show="item.flow_odd_number==null">{{ item.controls_desc }}</view>
				</view>
				<view class="Loading" v-show="showLoadingtwo">{{ showtexttwo }}</view>
			</scroll-view>	
			<view v-show="(state==0&&prizelist.total==0)||(state==1&&prizelist1.total==0)||(state==2&&prizelist2.total==0)">
				<image class="bg" src="../../static/images/null.png"></image>
				<view class="null">No prizes have been won</view>
			</view>
		</view> 
		
		<!-- 兑换金币 -->
		<uni-popup ref="exchangepopup">
			<view class="rulepopup">
				<view class="plaque">Exchange game coins</view>
				<view class="imgs">
					<view class="imgs_item">
						<image class="img1" :src="exchangeitem.goods_img"></image>
						<view class="text">{{ exchangeitem.goods_name }}</view>
					</view>
					<image class="img2" src="../../static/images/右箭头.png"></image>
					<view class="imgs_item">
						<image class="img1" src="../../static/images/金堆.png"></image>
						<view class="text">{{ exchangeitem.gold_coin }}</view>
					</view>
				</view>
				<view class="text">Prizes will automatically expire after they are converted into game currency</view>
				<view class="accept" @tap="exchange">Exchange</view>
				<image class="close" @tap="closeexchangepopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 打开支付弹框 -->
		<uni-popup ref="payfreightpopup">
			<view class="payfreightpopup">
				<view class="plaque">Freight payment</view>
				<view class="title">Gold coin recharge</view>
				<view class="Prize">
					<image class="img2" :src="payfreightitem.goods_img"></image>
					<view class="Prizeitem">
						<view class="name">{{ payfreightitem.goods_name }}</view>
						<view class="adress">{{ payfreightitem.ua_nation + '-'+  payfreightitem.ua_district + '-'+ payfreightitem.ua_detail }}</view>
						<view class="money">freight charge：${{ payfreightitem.freight/100 }}</view>
					</view>
				</view>
				<view class="accept" @tap="Pay">Pay</view>
				<image class="close" @tap="closepayfreightpopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getrequest, postrequest,EventStatistics } from '../../util/api'	
import {showDialog,closeDialog} from '../../util/dialog'
	export default {
		data() { 
			return {
				channel_no:'',
				href:'',
				ispay:false, //支付防重复点击
				token:'',
				current: 0, //，默认选中
     			tabs: ['pending','in progress','complete'],  //tab列表
				lineScale:0.5, 
				zindex:99, //tab层级
				state:0, // 参数状态
				size:10,
				nowexchange:false, // 正在调用兑换接口
				prizelist:[],  //奖品列表
				page:1,
				showLoading:false,  //是否正在加载
				showtext:'loading...',
				prizelist1:[],
				pageone:1,
				showLoadingone:false,  //是否正在加载
				showtextone:'loading...',
				prizelist2:[],
				pagetwo:1,
				showLoadingtwo:false,  //是否正在加载
				showtexttwo:'loading...',
				exchangeitem:{
					create_time: "2024-06-21 14:46:14",
					flow_odd_number: null,
					flow_status: 0,
					gold_coin: 10,
					goods_img: "https://private-message.oss-cn-beijing.aliyuncs.com/Eblock/images/%E7%94%B5%E8%84%91.png",
					goods_name: "Apple Watch 4",
					id: "06f09cce63314d2eb17d7d582843c1ca"
				}, // 选中兑换金币的奖品
				// 选中支付运费的奖品
				payfreightitem:{},
			}
		},
		onLoad(){
			console.log('onLoad')
			// 请求奖品列表
			// this.getprizelist()
		},
		onShow(){
			this.token =  uni.getStorageSync('token') || ''
			// 弹出登录弹框弹框
			if(!this.token){
				showDialog()
			}
			this.channel_no =  uni.getStorageSync('channel_no') || ''
			this.href =  uni.getStorageSync('href') || ''
			// 请求奖品列表
			this.getprizelist()
		},
		// 页面隐藏
		onHide(){
			// 关闭所有弹框
			this.closeexchangepopup()
			this.closepayfreightpopup()
		},
		onReady(){

		},
		methods: {
			// 切换tab
			changeTab(index) {
				console.log('当前选中的项：' + index)
				if(index == 0){
					this.state = 0 
					console.log('this.prizelist.length',this.prizelist)
					if(this.prizelist.length !== 0){
						return
					}
				}else if(index == 1){
					this.state = 1 
					console.log('this.prizelist1.length',this.prizelist1)
					if(this.prizelist1.length !== 0){
						return
					}
				}else if(index == 2){
					this.state = 2 
					console.log('this.prizelist2.length',this.prizelist2.length)
					if(this.prizelist2.length !== 0){
						return
					}
				}
				this.getprizelist()
			},
			// 请求奖品
			async getprizelist () {
				let params = {
					page:1,
					size:10,
					state:this.state,
				}
				const res = await getrequest('/api/winning_record/page_list',params)
				console.log('请求奖品列表',res)
				if( res &&res.code == 200){
					if(this.state == 0){
						this.prizelist = res.data
					}else if(this.state == 1){
						this.prizelist1 = res.data
					}else if(this.state == 2){
						this.prizelist2 = res.data
					}
				}
			},
			// 上拉加载
			loadMore(){
				// 判断是否正在加载中，避免重复触发加载
				if (this.showLoading) {
					return;
				}
				// 显示加载中提示
				this.showLoading = true
				//   计算当前数组有多少对象
				const objectCount = this.prizelist.list.filter(item => typeof item === 'object').length;
				//   如果已加载全部直接返回
				if(objectCount >= this.prizelist.total){
					this.showtext = 'No more prizes...'
						setTimeout(()=>{
								// 隐藏加载中提示
								this.showLoading = false; 
						},2000)
					return
				}
				//   每次请求页数+1
				this.page = this.page + 1
				// 模拟异步请求数据
				setTimeout(async ()=>{
					// 获取到的新数据
					let params = {
						page:this.page,
						size:10,
						state:0,
					}
					const res = await getrequest('/api/winning_record/page_list',params)
					console.log('继续追加请求奖品列表',res)
					if( res &&res.code == 200){
						this.prizelist.list.push(...res.data.list) 
						this.showLoading = false
					}
				}, 1000);
			},
			// 上拉加载
			loadMoreone(){
				// 判断是否正在加载中，避免重复触发加载
				if (this.showLoadingone) {
					return;
				}
				// 显示加载中提示
				this.showLoadingone = true
				//   计算当前数组有多少对象
				const objectCount = this.prizelist1.list.filter(item => typeof item === 'object').length;
				//   如果已加载全部直接返回
				if(objectCount >= this.prizelist1.total){
					this.showtextone = 'No more prizes...'
						setTimeout(()=>{
								// 隐藏加载中提示
								this.showLoadingone = false; 
						},2000)
					return
				}
				//   每次请求页数+1
				this.pageone = this.pageone + 1
				// 模拟异步请求数据
				setTimeout(async ()=>{
					// 获取到的新数据
					let params = {
						page:this.pageone,
						size:10,
						state:1,
					}
					const res = await getrequest('/api/winning_record/page_list',params)
					console.log('继续追加请求奖品列表',res)
					if( res &&res.code == 200){
						this.prizelist1.list.push(...res.data.list) 
						this.showLoadingone = false
					}
				}, 1000);
			},
			// 上拉加载
			loadMoretwo(){
				// 判断是否正在加载中，避免重复触发加载
				if (this.showLoadingtwo) {
					return;
				}
				// 显示加载中提示
				this.showLoadingtwo = true
				//   计算当前数组有多少对象
				const objectCount = this.prizelist2.list.filter(item => typeof item === 'object').length;
				//   如果已加载全部直接返回
				if(objectCount >= this.prizelist2.total){
					this.showtexttwo = 'No more prizes...'
						setTimeout(()=>{
								// 隐藏加载中提示
								this.showLoadingtwo = false; 
						},2000)
					return
				}
				//   每次请求页数+1
				this.pagetwo = this.pagetwo + 1
				// 模拟异步请求数据
				setTimeout(async ()=>{
					// 获取到的新数据
					let params = {
						page:this.pagetwo,
						size:10,
						state:3,
					}
					const res = await getrequest('/api/winning_record/page_list',params)
					console.log('继续追加请求奖品列表',res)
					if( res &&res.code == 200){
						this.prizelist2.list.push(...res.data.list) 
						this.showLoadingtwo = false
					}
				}, 1000);
			},
			// 跳转到地址页面
			toaddress(id){
				// 如果没登录
				if(!this.token){
					// 登录框
					showDialog()
					return
				}
				if(id){
					// 事件统计
					EventStatistics('中奖记录','待操作--选择收货地址')
				}
				uni.navigateTo({
					url:'/pages/address/address?id='+id
				})
			},
			// 兑换金币弹框
			openexchangepopup(item){
				// 赋值展示
				this.exchangeitem = item
				// 事件统计
				EventStatistics('中奖记录 ','待操作-金币兑换弹框')

				// 打开兑换弹框
				this.$refs.exchangepopup.open('center')
			},
			// 关闭金币兑换弹框
			closeexchangepopup(){
				this.$refs.exchangepopup.close()
			},
			// 打开运费支付弹框
			openpayfreightpopup(){
				// 事件统计
				EventStatistics('中奖记录 ','支付运费弹框')
				// 打开弹框
				this.$refs.payfreightpopup.open('center')
			},
			// 关闭运费弹框
			closepayfreightpopup(){
				this.$refs.payfreightpopup.close()
			},
			// 兑换金币
			async exchange(){
				// 事件统计
				EventStatistics('中奖记录','点击弹框兑换按钮')
				let params = {
					id: this.exchangeitem.id,
				}
				if(this.nowexchange){
					return
				}
				this.nowexchange = true
				const res = await postrequest('/api/winning_record/exchange_coin',params)
				console.log('兑换金币',res)
				if( res &&res.code == 200){
						// 兑换成功
					this.nowexchange = false
					this.closeexchangepopup()
					uni.showToast({
						title:'Redemption successful',
						icon:'none'
					})
					// 兑换成功请求一次列表
					this.getprizelist()
				}else{
					// 不管成功失败都返回初始状态
					this.nowexchange = false
					this.closeexchangepopup()
				}
			},
			// 复制物流订单号
			copyodercode(order,num){
				if(num == 1){
					// 事件统计
					EventStatistics('中奖记录','进行中-复制运单号')
				}else{
					// 事件统计
					EventStatistics('中奖记录 ','已完成-复制')
				}
				uni.setClipboardData({
					data: order,
					success: function () {
						uni.showToast({
							title: 'Copy successful',
							icon: 'none',
						});
					}
				});
			},
			// 支付运费
			payfreight(item){
				console.log('item',item)
				this.payfreightitem = item
				// 打开支付运费弹框
				this.openpayfreightpopup()
			},
			// 支付运费
			// 点击支付
			async Pay(){
				// 防重复点击
				if(this.ispay){
					return
				}
				// 事件统计
				EventStatistics('中奖记录','运费支付按钮')

				this.ispay = true
				// 处理一下穿过去的首页链接
				const url = uni.getStorageSync('href')
				const htmlIndex = url.indexOf('.html');
				// 如果找到了 .html，则截取之前的部分，否则保持原样
				const newUrl = htmlIndex !== -1 ? url.slice(0, htmlIndex + 5) : url;
				const processedUrl = newUrl + '#/pages/result/result'
				// const backcideoUrl = newUrl + '#/pages/play/play?videoId=' + this.videoId 
				// uni.setStorageSync('backcideoUrl',backcideoUrl)
				uni.showToast({
					title: 'In payment...',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000 
				})
				let params = {
					uwr_id:this.payfreightitem.id,
					pay_type:'STRIPE',
					return_url:processedUrl,
					channel_no:this.channel_no,
					link:this.href,
					// sub_channel_no: this.sub_channel_no,
				}
		        const res = await postrequest('/api/order/freight/create',params)
				console.log('创建订单',res)
				if(res&&res.code == 200){
					this.timer = setTimeout(()=>{
						this.ispay = false
					},3000)
					
					// 跳转
					window.location.href = res.data.payUrl
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		height: calc(100vh - 100rpx);
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgba(246, 246, 246, 1);
		.hader{	
			width: 750rpx;
			height: 50rpx;
			padding-top: 30rpx;
			// border: 1px solid black;
			margin: 0 auto;
			display: flex;
			.title{
				width: 150rpx;
				height: 50rpx;
				font-size: 34rpx;
				font-weight: 700;
				line-height: 50rpx;
				color: rgba(44, 44, 44, 1);
				text-align: center;
				margin: 0 0 0 300rpx;
			}
			.address{
				width: 130rpx;
				height: 50rpx;
				font-size: 28rpx;
				line-height: 56rpx;
				color: rgba(128, 128, 128, 1);
				text-align: center;
				margin: 0 0 0 150rpx;
			}
		}
		.address{
			width: 240rpx;
			height: 50rpx;
			border-radius: 0px 20px 20px 0px;
			background: linear-gradient(90deg, rgba(255, 141, 26, 1) 0%, rgba(255, 87, 51, 1) 100%);
			border: 1px solid rgba(255, 195, 0, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			position: fixed;
			top: 110rpx;
			z-index: 99;
			font-size: 24rpx;
			line-height: 50rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
		.main{
			width: 750rpx;
			// height: 1148rpx;
			margin: 0 auto;
			// border: 1px solid black;
			margin-bottom: 80rpx;
			.scroll-one{
				width: 100%;
				height: calc(100vh - 236rpx);
				// border: 1px solid black;
				.list_item{
					width: 720rpx;
					height: 340rpx;
					border-radius: 8px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
					margin: 0 auto;
					margin-bottom: 16rpx;
					.item_title{
						width: 680rpx;
						padding-top: 20rpx;
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						.order{
							height: 50rpx;
							font-size: 26rpx;
							line-height: 54rpx;
							color: rgba(199, 134, 70, 1);
							// border: 1px solid black;
							
						}
						.state{
							// width: 120px;
							height: 50rpx;
							font-size: 28rpx;
							padding: 0 4rpx;
							line-height: 50rpx;
							color: rgba(255, 141, 26, 1);
							text-align: right;
							// border: 1px solid rgba(240, 126, 12, 1);
							border-radius: 0 14rpx 0 14rpx;
							margin-left:auto;
							// border: 1px solid black;
						}
					}
					.itemcenter{
						width: 680rpx;
						height: 160rpx;
						padding-top: 20rpx;
						margin: 0 auto;
						margin-top: 10rpx;
						// border: 1px solid black;
						border-bottom: 1px solid rgba(250, 239, 227, 1);
						display: flex;
						.img{
							width: 100rpx;
							height: 100rpx;
							// border: 1px solid black;
							margin: 20rpx 0;
						}
						.itemcenter_text{
							width: 500rpx;
							height: 160rpx;
							// border: 1px solid black;
							margin: 0rpx 0 0 10rpx;
							.name{
								width: 450rpx;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 700;
								line-height: 40rpx;
								color: rgba(209, 107, 4, 1);
								margin: 10rpx 0 0 20rpx;
							}
							.text_address{
								width: 450rpx;
								height: 80rpx;
								font-size: 14px;
								line-height: 40rpx;
								color: rgba(199, 134, 70, 1);
								margin: 10rpx 0 0 20rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								text-overflow: ellipsis;
								max-height: 80rpx;
							}
						}
						.img2{
							width: 60rpx;
							height: 60rpx;
							margin: 40rpx 0;
						}
					}
					.value{
						width: 700rpx;
						height: 60rpx;
						padding-top: 10rpx;
						// border: 1px solid black;
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						.value_text{
							width: 400rpx;
							height: 60rpx;
							font-size: 26rpx;
							line-height: 60rpx;
							margin-left: 10rpx;
							color: rgba(173, 89, 5, 1);
						}
						.buttom{
							width: 200rpx;
							height: 60rpx;
							border-radius: 30px;
							background: linear-gradient(90deg, rgba(232, 94, 63, 1) 0%, rgba(252, 158, 63, 1) 100%);
							font-size: 28rpx;
							line-height: 60rpx;
							color: rgba(255, 255, 255, 1);
							text-align: center;
						}
					}
					.ExpressNumber{
						width: 540rpx;
						height: 60rpx;
						font-size: 28rpx;
						// border: 1rpx solid black;
						line-height:64rpx;
						color: rgba(173, 89, 5, 1);
						margin: 10rpx 0 0 16rpx;
					}
					.copyoderhnum{
						width: 140rpx;
						height: 60rpx;
						border-radius: 30px;
						border: 1px solid rgba(232, 94, 63, 1);
						font-size: 28rpx;
						line-height: 60rpx;
						color: rgba(232, 94, 63, 1);
						text-align: center;
						margin: 10rpx 0 0 10rpx;
					}
					.remarks{
						width: 700rpx;
						height: 60rpx;
						font-size: 28rpx;
						line-height: 60rpx;
						color: rgba(173, 89, 5, 1);
						margin: 6rpx 0 0 10rpx;
					}
					.freight{
						width: 270rpx;
						height: 60rpx;
						border-radius: 30px;
						background: linear-gradient(90deg, rgba(232, 94, 63, 1) 0%, rgba(252, 158, 63, 1) 100%);
						font-size: 26rpx;
						line-height: 60rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						margin: 10rpx 4rpx 0 0;
					}
				}
				.Loading{
					width: 750rpx;
					height: 60rpx;
					background-color: beige;
					text-align: center;
					line-height: 60rpx;
					// margin-bottom: 200rpx;
				}	
			}
			.bg{
				width: 300rpx;
				height: 200rpx;
				margin: 175rpx 175rpx 0 230rpx;
			}
			.null{
				width: 300rpx;
				height: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: rgba(128, 128, 128, 1);
				margin: 0 auto;
				text-align: center;
			}
		}
		// 规则
		.rulepopup{
			width: 660rpx;
			height: 620rpx;
			background: linear-gradient(180deg, rgba(254, 249, 228, 1) 0%, rgba(255, 243, 212, 1) 100%);
			border-radius: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 95rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			// 规则说明
			.RuleSubclass{
				width: 600rpx;
				height: 60rpx;
				font-size: 28rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(56, 56, 56, 1);
				text-align: left;
				margin: 10rpx 0 0 40rpx;
			}
			.title{
				width: 500rpx;
				height: 60rpx;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				margin-top: 80rpx;
			}
			.imgs{
				width: 570rpx;
				height: 220rpx;
				margin: 45rpx;
				display: flex;
				.imgs_item{
					width: 200rpx;
					height: 200rpx;
					// border: 1px solid black;
					.img1{
						width: 170rpx;
						height: 140rpx;
						margin: 0 0 0 10rpx;
						// border: 1px solid black;
					}
					.text{
						width: 200rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 40rpx;
						color: rgba(214, 47, 47, 1);
						text-align: center;
					}
				}
				.img2{
					width: 76px;
					height: 20px;
					margin-top: 70rpx;
				}
			}
			.text{
				width: 600rpx;
				height: 80rpx;
				// border: 1px solid black;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: 700;
				line-height: 40rpx;
				color: rgba(214, 47, 47, 1);
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 30rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 640rpx;
				left: 300rpx;
				// margin: 420rpx 0 0 300rpx;
			}
		}
		// 运费弹框
		.payfreightpopup{
			width: 660rpx;
			height: 600rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 95rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			.title{
				width: 500rpx;
				height: 40rpx;
				margin: 30rpx 0 0 20rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				// border: 1px solid black;
			}
			.Prize{
				width: 620rpx;
				height: 220rpx;
				border: 1px solid rgba(255, 255, 255, 1);
				margin: 40rpx 10rpx;
				display: flex;
				.img2{
					width: 150rpx;
					height: 150rpx;
					margin-top: 20rpx;
				}
				.Prizeitem{
					width: 470rpx;
					height: 220rpx;
					// border: 1px solid black;
					.name{
						width: 450rpx;
						height: 50rpx;
						font-size: 28rpx;
						font-weight: 700;
						line-height: 50rpx;
						color: rgba(209, 107, 4, 1);
					}
					.adress{
						width: 470rpx;
						height: 100rpx;
						font-size: 28rpx;
						line-height: 50rpx;
						color: rgba(199, 134, 70, 1);
						margin-top: 10rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						-webkit-line-clamp: 2; /* 显示的行数 */
						text-overflow: ellipsis;
					}
					.money{
						width: 260rpx;
						height: 50rpx;
						font-size: 28rpx;
						line-height: 50rpx;
						color: rgba(173, 89, 5, 1);
						margin-top: 10rpx;

					}
				}
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 50rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 640rpx;
				left: 300rpx;
				// margin: 420rpx 0 0 300rpx;
			}
		}
	}
</style>
